<!--养老决策分析-->
<template>
  <div class="chart-box decision" :class="fullScreen?'decision-wrapper':''">
    <div class="nav-top" :class="leftAnimate" :style="{width:navWidth+ 'px',top:top+'px'}">
      <div class="nav-top-container">
        <h2 class="nav-top-title">养老支出分析</h2>
        <div class="nav-top-item-box">
          <!--<span class="prev-btn el-icon-arrow-left" @click="goToPrev"></span>-->
          <!--<span class="next-btn el-icon-arrow-right" @click="goToNext"></span>-->
          <p class="nav-top-item-container">
            <a class="nav-top-item" :class="classNum==0?'nav-top-item-active':''" @click="goScroll(0)">养老支出分析</a>
            <a class="nav-top-item" :class="classNum==1?'nav-top-item-active':''" @click="goScroll(1)">养老支出构成</a>
            <a class="nav-top-item" :class="classNum==2?'nav-top-item-active':''" @click="goScroll(2)">养老待遇人员分析</a>
            <a class="nav-top-item" :class="classNum==3?'nav-top-item-active':''" @click="goScroll(3)">抚养比及退休预测</a>
          </p>
        </div>
        <div class="top-operate">
          <span class="three-spot">...</span>
          <i></i>
          <svg class="all-close-btn icon-svg" v-if="!fullScreen" @click="closeAll" viewBox="0 0 612 792">
            <path :d="svgPath.closeFullScreen"/>
          </svg>
        </div>
      </div>
    </div>
    <div>
      <div class="chart-item" :style="{height:height+'px'}">
        <!--因为filter是异步请求的来的，所以只有获取到其值后才可以进行dom渲染-->
        <div class="item-box-left" v-if="filter" :style="{width:width+ 'px'}">
          <Chart1 v-if="isShow&&!isGoOther" :isChange="isChange" :filter="filter"></Chart1>
        </div>
        <div class="item-box-right" v-if="filter" :style="{width:width+ 'px'}">
          <Chart2 v-if="isShow&&!isGoOther" :isChange="isChange" :filter="filter"></Chart2>
        </div>
      </div>
      <div class="chart-item" v-if="num>0" :style="{height:height/2+'px'}">
        <!--因为filter是异步请求的来的，所以只有获取到其值后才可以进行dom渲染-->
        <div class="item-box-all" v-if="filter" :style="{width:width*2+12+ 'px'}">
          <Chart3 v-if="isShow" :isChange="isChange" :filter="filter"></Chart3>
        </div>
      </div>
      <div class="chart-item" v-if="num>1" :style="{height:height*1.5+'px'}">
        <!--因为filter是异步请求的来的，所以只有获取到其值后才可以进行dom渲染-->
        <div class="item-box-all" v-if="filter" :style="{width:width*2+12+ 'px'}">
          <Chart4 v-if="isShow" :isChange="isChange" :filter="filter"></Chart4>
        </div>
      </div>
      <div class="chart-item" v-if="num>2" :style="{height:height+'px'}">
        <!--因为filter是异步请求的来的，所以只有获取到其值后才可以进行dom渲染-->
        <div class="item-box-left" v-if="filter" :style="{width:width+ 'px'}">
          <Chart5 v-if="isShow" :isChange="isChange" :filter="filter"></Chart5>
        </div>
        <div class="item-box-right" v-if="filter" :style="{width:width+ 'px'}">
          <Chart6 v-if="isShow" :isChange="isChange" :filter="filter"></Chart6>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {svgPath, quitFullScreen} from "../../assets/js/utils";
  import {getSearchItems} from '../../api/api'
  import Chart1 from './pension-component/chartItem1'
  import Chart2 from './pension-component/chartItem2'
  import Chart3 from './pension-component/chartItem3'
  import Chart4 from './pension-component/chartItem4'
  import Chart5 from './pension-component/chartItem5'
  import Chart6 from './pension-component/chartItem6'

  export default {
    props: ['isChange', 'fullScreen', 'isCollapse','pageChange'],
    components: {
      Chart1,
      Chart2,
      Chart3,
      Chart4,
      Chart5,
      Chart6
    },
    data() {
      return {
        isGoOther:false,
        leftAnimate: '',
        svgPath: svgPath,
        filter: null,
        width: 0,
        isShow: true,
        left: 80,
        top: 70,
        height: 500,
        navWidth: 800,
        chartHeight: 445,
        num: 0,
        nextNum: 0,
        classNum: 0,
        canChangeStyle: false
      }
    },
    watch: {
      isCollapse(val){
        let bodyWidth = document.querySelector('body').clientWidth;
        if (!val) {
          this.navWidth = bodyWidth - 200;
          this.leftAnimate = 'open-left-menu'
        } else {
          this.navWidth = bodyWidth - 44;
          this.leftAnimate = 'close-left-menu'
        }
      },
      isChange(){
        setTimeout(() => {
          this.getChartItem();
        }, 100)
      },
      height(val){
        let that = this;
        document.querySelector('.el-main').onscroll = function (e) {
          e = e || window.event;
          let scrollTop = e.target.scrollTop;
          if(that.num<=(parseInt(Math.ceil(scrollTop/ val) ) + 1)){
            if ((scrollTop - 5) / val > 0 && (scrollTop - 5) / val < 0.4) {
              that.num = 1;
            } else if ((scrollTop - 5) / val > 0.4 && (scrollTop - 5) / val < 0.5) {
              that.num = 2;
            } else if ((scrollTop - 5) / val > 1) {
              that.num = 3;
            }
          }
          if (scrollTop == 0) {
            that.classNum = 0
          } else {
            if (!that.canChangeStyle) {
              that.classNum = parseInt((scrollTop-12) / val) + 1
            }
          }
        }
      },
      pageChange(){
        this.isGoOther = true;
        this.isGoOther = false;
        this.nextNum = 0;
        this.classNum = 0;
        document.querySelector('.el-main').scrollTop = 0 + 'px';
      }
    },
    activated(){
      setTimeout(() => {
        this.setLastPosition()
      }, 0)
    },
    mounted() {
      this.getChartItem();
      setTimeout(() => {
        this.isShow = true;//因为图表的高度是动态获取的，一开始并没有高度值，无高度值时不能渲染图表，故要等高度赋值后才渲染图表。
      }, 1)
      //获取筛选数据
      getSearchItems('init/initInput').then((res) => {
        if (res.code == 0) {
          this.filter = res.data;
        }
      });
    },
    methods: {
      setLastPosition() {
        if (sessionStorage.getItem('isPrev')) {
          let num = Number(sessionStorage.getItem('isPrev'))
          this.goScroll(num);
          sessionStorage.removeItem('isPrev')
        }
        let that = this;
        let val = this.height;
        document.querySelector('.el-main').onscroll = function (e) {
          e = e || window.event;
          let scrollTop = e.target.scrollTop;
          if(that.num<=(parseInt(Math.ceil(scrollTop/ val) ) + 1)){
            if ((scrollTop - 5) / val > 0 && (scrollTop - 5) / val < 0.4) {
              that.num = 1;
            } else if ((scrollTop - 5) / val > 0.4 && (scrollTop - 5) / val < 0.5) {
              that.num = 2;
            } else if ((scrollTop - 5) / val > 1) {
              that.num = 3;
            }
          }
          if (scrollTop == 0) {
            that.classNum = 0
          } else {
            if (!that.canChangeStyle) {
              that.classNum = parseInt((scrollTop-12) / val) + 1
            }
          }
        }
      },
      closeAll(){
        quitFullScreen();
      },
      //点击面包屑效果
      goScroll(num, timeVal){
        timeVal = timeVal || 100;
        this.classNum = num;
        this.canChangeStyle = true;
        if (this.num < num) {
          this.num = num;
        }
        let scrollTop = document.querySelector('.el-main').scrollTop;
        let realNum = num;
        if (num == 2) {
          realNum = num - 0.5;
        }
        if (num > 2) {
          realNum = num + 0.5;
        }
        let goTop = this.height * realNum;
        let height = Math.abs(goTop - scrollTop);
        let spit = height / 1000;
        let time = 0;
        let timer = setInterval(() => {
          time += 100;
          if (time <= 1000) {
            if (scrollTop < goTop) {
              document.querySelector('.el-main').scrollTop = scrollTop + spit * time;
            } else {
              document.querySelector('.el-main').scrollTop = scrollTop - spit * time;
            }
          } else {
            this.canChangeStyle = false;
            clearInterval(timer)
          }
        }, timeVal)
      },
      //动态设置宽高
      getChartItem(){
        let height = document.querySelector('body').clientHeight;
        let barHeight = 70;
        let sideWidth = 44;
        let bodyWidth = document.querySelector('body').clientWidth;
        let top = 70;
        if (document.querySelector('.el-header')) {
          barHeight = document.querySelector('.el-header').clientHeight;
          if (document.querySelector('.el-aside')) {
            sideWidth = document.querySelector('.el-aside').clientWidth;
          }
        } else {
          barHeight = 0;
          sideWidth = 0;
          top = 0;
        }
        this.top = top;
        this.left = sideWidth;
        this.navWidth = bodyWidth - sideWidth;
        this.height = height - barHeight - 54;
        //每一个图表块的宽度
        let width = 1000;
        if (document.querySelector('.chart-box')) {
          width = document.querySelector('.chart-box').clientWidth;
        }
        this.width = (width - 44) / 2;
        //nav-top left值
      },
    },
    beforeRouteEnter(to,from,next){
      next()
    },
    beforeRouteLeave (to, from, next) {
      if(to.name=='detail'){
        this.isGoOther = false;
      }else{
        this.isGoOther = true;
        this.num = 0;
        document.querySelector('.el-main').scrollTop = 0 + 'px';
      }
      next()
    },
  }
</script>
<style scoped>
  @import '../../assets/css/decision.css';
</style>
